<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery-ui-1.8.12.custom.min.js"
	type="text/javascript"></script>
<script src="js/plugin/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="js/plugin/jquery.ui.timepicker.js" type="text/javascript"></script>
<script src="js/eslserver-common.js" type="text/javascript"></script>
<script src="js/eslserver-datePickerObj.js" type="text/javascript"></script>
<script src="js/eslserver-timePickerObj.js" type="text/javascript"></script>
<script src="js/eslserver-dialogObj.js" type="text/javascript"></script>
<script src="js/eslserver-fileupload.js" type="text/javascript"></script>
<link href="css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.timepicker.css" rel="stylesheet"></link>
<link href="css/eslserver-main.css" rel="stylesheet"></link>

<title>Add Schedule</title>

<script>
    var scheduleID = getFromAttribute(${scheduleID});
    if(!scheduleID) {
    	scheduleID = getFromAttribute(${param.scheduleID});
    }
    
    $(document).ready(function() {
		$("#container").addClass("ui-widget");

		$("#scheduleID").attr("value", scheduleID);
		
		var startDatePicker = new ESLserverDatePickerObj("#startDate");
		startDatePicker.buildDatePicker();

		var startTimePicker = new ESLserverTimePickerObj("#startTime");
		startTimePicker.buildTimePicker();
		
		loadScheduleInfoForm();
		
		$("#resetActButn").click(function() {
			$("#updateActButn").attr("disabled", true);
			$("#addActButn").removeAttr("disabled");

		});
		
		$("#backToMain").attr("value", "Back to Main");
		$("#backToMain").click(function(evt) {
			evt.preventDefault();
			window.top.location.href = "MainDashboard.jsp?tabID=2";
		});
		
		$("#esl").change(function() {
			getImageDropdown(0, $("#esl option:selected").val());
		});	
		
		$("#repeat").click(function(){
			var repeatCheck = $(this);
			if(repeatCheck.is(":checked")){
				$("#interval_zone").show();
                $("#timeInterval").addClass("required");
                $("#timeInterval").addClass("digits");
			}else{
				$("#interval_zone").hide();
				$("#timeInterval").val("");
                $("#timeInterval").removeClass("required digits");
			}			
		});
		
		$.validator.addMethod("TimeChecker", function(value) {
            var time = "^([0-1][0-9]|[2][0-3]):([0-5][0-9])$";
                return value.match(time);
        }, "Invalid time format (format: HH:MM)");

		$.validator.addMethod("ESLDateChecker", function(value) {
            var date = "^(([1-9])|(0[1-9])|(1[0-2]))-(([0-9])|([0-2][0-9])|(3[0-1]))-(([0-9][0-9])|([1-2][0,9][0-9][0-9]))$";
                return value.match(date);
        }, "Invalid Date format (format: MM-DD-YYYY)");
		
        $("#main").validate({
            rules: {
            	
            	scheduleName: {
            		 required: true,     
            	},            	
            	esl: {
                    required: true,
                },            	
                eslImage: {
                    required: true,
                },                
                startDate: {
                    required: true,
                    ESLDateChecker: true
                },                
                startTime: {
                    required: true,
                    TimeChecker: true 
                },
                
                timeInterval: {
                    min: 1
                }
            },
        
            messages: {
            	
            	esl: {
                    required: "Please add an ESL first",
                },            	
                eslImage: {
                    required: "Please upload an image to ESL first",
                }        	
            }
        });
	});
	
	function loadScheduleInfoForm() {
		if(!scheduleID){
			$("#updateActButn").hide();
			$("#interval_zone").hide();
			
			$("#addActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddSchedule.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
		}else{
		    $.getJSON("/eslserver/LoadScheduleInfo.do?scheduleID=" + scheduleID, function(data) {
			    $("#scheduleID").val(data.schedule.scheduleID);
			    $("#scheduleName").val(data.schedule.name);
			    $("#startDate").val(data.startDate);
			    $("#startTime").val(data.startTime);	
			    $("#repeat").attr('checked', data.schedule.repeated);			    
			    $("#scheduleDescription").val(data.schedule.description);
			    if(!data.schedule.repeated){
			    	$("#interval_zone").hide();
			    	$("#timeInterval").removeClass("required digits");
			    }else{
			    	$("#timeInterval").val(data.schedule.timeInterval);
			    	$("#timeInterval").addClass("required");
	                $("#timeInterval").addClass("digits");
			    }
			})

			$("#addActButn").hide();

		    $("#updateActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddSchedule.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
        }

		$.getJSON("/eslserver/ESLDropdown.do?scheduleID=" + scheduleID, function(
				dropdowndata) {
			setdropdown(dropdowndata.eslMap, "#esl", dropdowndata.eslID);
			if(!dropdowndata.eslID) {
				for (var propertyID in dropdowndata.eslMap) {
					getImageDropdown(0, propertyID);
					break;
				}
			} else {
				getImageDropdown(scheduleID, dropdowndata.eslID);
			}
		});	
	}
	
	function getImageDropdown(scheduleID, eslID){
		$.getJSON("/eslserver/ImageDropdown.do?scheduleID="+ scheduleID +"&eslID=" + eslID, function(
				dropdowndata) {
			setdropdown(dropdowndata.imageMap, "#eslImage", dropdowndata.imageID);
		});	
	}
	
</script>
</head>
<body id="container">
	<fieldset class="mainFieldSet talentForm">
		<legend class="mainLegend">Schedule Info</legend>
		<form id="main" accept-charset="UTF-8">
			<table>
				<tr style="display: none">
					<td>Schedule ID</td>
					<td><input type="text" id="scheduleID" name="scheduleID"
						size="30" />
				</tr>
				<tr>
					<td>Schedule Name<em> *</em></td>
					<td><input id="scheduleName" name="scheduleName" type="text"
						size="30" /></td>
				</tr>
				<tr>
					<td>ESL<em> *</em></td>
					<td><select name="esl" id="esl"></select></td>
				</tr>
				<tr>
					<td>ESL Image<em> *</em></td>
					<td><select name="eslImage" id="eslImage"></select></td>
				</tr>
				<tr>
					<td>Start Date<em> *</em></td>
					<td><input id="startDate" name="startDate" type="text"
						size="30" /></td>
				</tr>
				<tr>
					<td>Start Time<em> *</em></td>
					<td><input id="startTime" name="startTime" type="text"
						size="30" /></td>
				</tr>
				<tr>
					<td>Repeat</td>
					<td><input id="repeat" name="repeat" type="checkbox" size="30" />
					</td>
				</tr>
				<tr id="interval_zone">
					<td>Time Interval</td>
					<td><input id="timeInterval" name="timeInterval" type="text"
						size="30" /></td>
					<td>Seconds</td>
				</tr>
				<tr>
					<td>Description</td>
					<td><textarea id="scheduleDescription"
							name="scheduleDescription" rows="3" cols="50"
							class="expand100-200"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2"><input id="addActButn" type="button"
						value="ADD" /> <input id="updateActButn" name="updateActButn"
						type="button" value="UPDATE" /> <input id="resetActButn"
						name="resetActButn" type="reset" value="RESET" />
					</td>
				</tr>

			</table>
		</form>
	</fieldset>

	<br />

	<div>
		<input type=button id="backToMain" />
	</div>

</body>